<template>
  <div class="users">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="inputVaule" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="Btnsearch()"></el-button>
      </el-input>
      <el-button type="success" plain @click="incremmentUsers()">添加用户</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      :data="usersList"
      >
      <el-table-column prop="username" label="姓名" width="180"></el-table-column>
       <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="mobile" label="电话" width="180"></el-table-column>
      <el-table-column  label="用户状态" width="180">
        <!-- 具名插槽的使用 -->
        <template v-slot:default="obj">
          {{obj.row.mg_state}}
          <el-switch
            v-model="obj.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changestate(obj.row.id,obj.row.mg_state)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="操作" min-width="260">
        <template v-slot:default="obj">
          <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="emitUserInfo(obj.row)"></el-button>
          <el-button type="danger" icon='el-icon-delete' size="mini" plain @click="delUsers(obj.row.id)"></el-button>
          <el-button type="success" icon="el-icon-check" size="mini" plain>分派角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加用户信息弹框 -->
    <el-dialog
     @close="closeDialog"
      title="添加用户信息"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span  class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUsers()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑用户信息模态框 -->
    <el-dialog
      @close="showemitInfo()"
      title="修改用户信息"
      :visible.sync="showemit"
      width="30%"
    >
      <el-form :model="emitForm" :rules="emitrules" ref="emitForm" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <!-- <el-input v-model="emitForm.username"></el-input> -->
          <el-tag type="info">{{ emitForm.username }}</el-tag>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="emitForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="emitForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span  class="dialog-footer">
          <el-button @click="showemit = false">取 消</el-button>
          <el-button type="primary" @click="emitInfosuccess()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data(){
    return{
      inputVaule:'',
      query:'',
      pagenum:1,
      pagesize:2,
      usersList:[],
      total:0,
      dialogVisible:false,
      showemit:false,
      emitForm:{
        username:'',
        email:'',
        mobile:'',
        id:''
      },
      ruleForm:{
        username:'',
        password:'',
        email:'',
        mobile:''
      },
       rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: ['blur','change'] },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ['blur','change'] }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: ['blur','change'] },
            { min: 6, max: 12, message: '长度在 6 到 12个字符', trigger: ['blur','change'] }
          ],
          email:[
            {message: '请输入邮箱',type:'email',trigger: ['blur','change']}
          ],
          mobile:[
            {message: '请输入手机号',Pattern:/^1[3-9]\d{9}$/,trigger: ['blur','change']}
          ]
        },
       emitrules:{
          username: [
            { required: true, message: '请输入用户名', trigger: ['blur','change'] },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ['blur','change'] }
          ],
          email:[
            {message: '请输入邮箱',type:'email',trigger: ['blur','change']}
          ],
          mobile:[
            {message: '请输入手机号',Pattern:/^1[3-9]\d{9}$/,trigger: ['blur','change']}
          ]
       }
    }
  },
  created(){
    this.getTabelList();
  },
  methods:{
    // 获取列表信息
    getTabelList(){
      this.$axios.get('users',{
        params:{
          query:this.query,
          pagenum:this.pagenum,
          pagesize:this.pagesize
        },
        headers:{Authorization:localStorage.getItem("token")}
      }).then((res)=>{
        // 对象解构
        const{meta,data}=res.data;
        if(meta.status==200){
          this.usersList=data.users;
          this.total=data.total;
        }
      })
    },
    // 改变列表条数
    handleSizeChange(val) {
      this.pagesize=val;
      this.pagenum=1;
      this.getTabelList();
    },
    // 改变列表页数
    handleCurrentChange(val) {
      this.pagenum=val;
      this.getTabelList();
    },
    // 搜索用户信息
    Btnsearch(){
      this.pagenum=1;
      this.query=this.inputVaule;
      this.getTabelList();
    },
    // 改变用户状态
    async changestate(id,state){
       const res=await this.$axios.put(`users/${id}/state/${state}`)
       if(res.data.meta.status==200){
         this.$message.success(res.data.meta.msg);
       }else{
          this.$message.success("请重新设置");
       }
   },
  //  用户模态框的显示
   incremmentUsers(){
    this.dialogVisible=true;
   },
  //  添加用户信息
   async addUsers(){
    try{
        const res=await this.$axios.post('users',this.ruleForm)
        if(res.data.meta.status==201){
          this.$message.success(res.data.meta.msg);
          this.dialogVisible=false;
          this.pagenum=Math.ceil(++this.total/this.pagesize);
          this.getTabelList();
        }else{
          this.$message.error(res.data.meta.msg);
        }
      }catch(e){
        this.$message.error(e)
      }
   },
  //  表单重置
   closeDialog(){
     this.$refs.ruleForm.resetFields();
   },
  //  删除用户信息
  async delUsers(id){
    try{
      const flag=await this.$confirm('此操作将永久删除该文件, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res=await this.$axios.delete(`users/${id}`)
      if(res.data.meta.status==200){
         this.$message.success(res.data.meta.msg);
         if(this.usersList.length==1&&this.pagenum>1){
           this.pagenum--;
         }
         this.getTabelList();
       }
      if(flag){
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }
    }catch(e){
      this.$message({
        type: 'info',
        message: '已取消删除'
      });  
    }
   },
  //  编辑表单重置
   showemitInfo(){
    this.$refs.emitForm.resetFields();
   },
  // 编辑用户信息
  emitUserInfo(row){
    this.showemit=true;
    this.emitForm.id=row.id;
    this.emitForm.username=row.username;
    this.emitForm.email=row.email;
    this.emitForm.mobile=row.mobile;
  },
  // 用户数据修改成功
    async emitInfosuccess(){
      // 对表单进行校验
      try{
         await this.$refs.emitForm.validate() 
        const res=await this.$axios({
              url:`users/${this.emitForm.id}`,
              method:'put',
              data:this.emitForm
            })
        this.showemit=false;
        this.getTabelList()
      }catch(e){
        console.log(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb{
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid red;
}
.input-with-select{
  width: 300px;
  margin-right:20px;
}
</style>